<style lang="less">
    @import './own-space.less';
</style>

<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="person"></Icon>
                个人信息
            </p>
            <div>
                <Form ref="userForm" :model="userForm" :label-width="100" label-position="right" :rules="inforValidate">
                    <FormItem label="用户姓名：" prop="name">
                        <div style="display:inline-block;width:300px;">
                            <Input v-model="userForm.name"  readonly/>
                        </div>
                    </FormItem>
                    <FormItem label="登录密码：">
                        <Button type="text" size="small" @click="showEditPassword">修改密码</Button>
                    </FormItem>
                    <div>
                        <Button type="text" style="width: 100px;" @click="cancelEditUserInfor">取消</Button>
                        <Button type="primary" style="width: 100px;" :loading="save_loading" @click="saveEdit">保存</Button>
                    </div>
                </Form>
            </div>
        </Card>
        <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false :width="500">
            <h3 slot="header" style="color:#2D8CF0">修改密码</h3>
            <Form ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right" :rules="passwordValidate">
                <FormItem label="新密码" prop="newPass">
                    <Input v-model="editPasswordForm.newPass" placeholder="请输入新密码，至少6位字符" type="password" />
                </FormItem>
                <FormItem label="确认新密码" prop="rePass">
                    <Input v-model="editPasswordForm.rePass" placeholder="请再次输入新密码" type="password" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditPass">取消</Button>
                <Button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import Cookies from 'js-cookie';
    export default {
        name: 'ownspace_index',
        data() {
            const valideRePassword = (rule, value, callback) => {
                if (value !== this.editPasswordForm.newPass) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            return {
                userForm: {
                    name: ''
                },
                uid: '', // 登录用户的userId
                save_loading: false,
                editPasswordModal: false, // 修改密码模态框显示
                savePassLoading: false,
                oldPassError: '',
                inforValidate: {
                    name: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }]
                },
                editPasswordForm: {
                    oldPass: '',
                    newPass: '',
                    rePass: ''
                },
                passwordValidate: {
                    oldPass: [{
                        required: false,
                        message: '请输入原密码',
                        trigger: 'blur'
                    }],
                    newPass: [{
                            required: true,
                            message: '请输入新密码',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            message: '请至少输入6个字符',
                            trigger: 'blur'
                        },
                        {
                            max: 32,
                            message: '最多输入32个字符',
                            trigger: 'blur'
                        }
                    ],
                    rePass: [{
                            required: true,
                            message: '请再次输入新密码',
                            trigger: 'blur'
                        },
                        {
                            validator: valideRePassword,
                            trigger: 'blur'
                        }
                    ]
                },
                initPhone: ''
            };
        },
        methods: {
            showEditPassword() {
                this.editPasswordModal = true;
            },
            cancelEditUserInfor() {
                this.$store.commit('removeTag', 'ownspace_index');
                localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
                let lastPageName = '';
                if (this.$store.state.app.pageOpenedList.length > 1) {
                    lastPageName = this.$store.state.app.pageOpenedList[1].name;
                } else {
                    lastPageName = this.$store.state.app.pageOpenedList[0].name;
                }
                this.$router.push({
                    name: lastPageName
                });
            },
            saveEdit() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {
                        if (this.phoneHasChanged && this.userForm.cellphone !== this.initPhone) { // 手机号码修改过了而且修改之后的手机号和原来的不一样
                            if (this.hasGetIdentifyCode) { // 判断是否点了获取验证码
                                if (this.identifyCodeRight) { // 判断验证码是否正确
                                    this.saveInfoAjax();
                                } else {
                                    this.$Message.error('验证码错误，请重新输入');
                                }
                            } else {
                                this.$Message.warning('请先点击获取验证码');
                            }
                        } else {
                            this.saveInfoAjax();
                        }
                    }
                });
            },
            cancelEditPass() {
                this.editPasswordModal = false;
            },
            saveEditPass() {
                this.$refs['editPasswordForm'].validate((valid) => {
                    if (valid) {
                        this.savePassLoading = true;
                        let pwd = this.editPasswordForm.newPass;
                        $.getJSON('/user/pwd?rows=[{id:'+this.uid+'}]&input=' + pwd, {}, json => {
                            this.savePassLoading = false;
                            this.editPasswordModal = false;
                            if (json.success) {
                                this.$Modal.success({
                                    title: '修改成功',
                                    content: '修改成功'
                                });
                            } else {
                                this.$Modal.error({
                                    title: '修改失败',
                                    content: '修改失败'
                                });
                            }
                        })
                        // you can write ajax request here
                    }
                });
            },
            init() {
                this.userForm.name = Cookies.get('user');
                this.uid = Cookies.get("userId");
            },
            cancelInputCodeBox() {
                this.inputCodeVisible = false;
                this.userForm.cellphone = this.initPhone;
            },
            saveInfoAjax() {
                this.save_loading = true;
                setTimeout(() => {
                    this.$Message.success('保存成功');
                    this.save_loading = false;
                }, 1000);
            }
        },
        mounted() {
            this.init();
        }
    };
</script>